<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <!-- <script type="text/javascript" -->
    <!-- src="https://webapi.amap.com/maps?v=1.4.12&key=45b971fcbdea6ab0fb66dbb11197c066"></script> -->
    <!-- <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> -->
<!-- 
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=3.0&ak=kBgsjMBGC4F6sxGbwcTtW2EyY7O30znk"></script> -->

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=kBgsjMBGC4F6sxGbwcTtW2EyY7O30znk"></script>
</head>

<blockquote class="layui-elem-quote">
    <div class="layui-inline">
        <i class="layui-icon layui-icon-list layui-head-icon"></i>
        <span class="layui-font-16 layui-font-green">添加自提点</span>
    </div>
</blockquote>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">
            <input name="id" hidden value="{$row.id|default=''}" ></input>
            <div class="layui-form-item">
                <label class="layui-form-label">自提点名称</label>
                <div class="layui-input-block">
                    <input type="text" value="{$row.name|default=''}" lay-verify="required" placeholder="请输入自提点名称"
                        class="layui-input" name="name">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系人</label>
                <div class="layui-input-block">
                    <input type="text" value="{$row.contact_name|default=''}" lay-verify="required" placeholder="请输入联系人"
                        class="layui-input" name="contact_name">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-block">
                    <input type="text" value="{$row.contact_phone|default=''}" lay-verify="required"
                        placeholder="请输入联系电话" class="layui-input" name="contact_phone">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">输入自提点地址</label>
                <div class="layui-input-block">
                    <input type="text" name="keyword" value="{$row.addr|default=''}" autocomplete="off" placeholder="请输入自提点地址" class="layui-input">
                    <div class="layui-inline">
                        <a id="mapmoveBtn" class="layui-btn layui-btn-danger">获取坐标</a>
                    </div>
                    <div id="map" class="panel panel-default" style="height: 230px; margin-top: 0px;"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">坐标经度<i class="color-red">&#10038</i></label>
                <div class="layui-input-block">
                    <input type="text" id="lng" name="lng" lay-verify="required" value="{$row.lng|default=''}" disabled="disabled" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">坐标纬度<i class="color-red">&#10038</i></label>
                <div class="layui-input-block">
                    <input type="text" name="lat" id="lat" lay-verify="required" value="{$row.lat|default=''}" disabled="disabled" autocomplete="off" class="layui-input">
                </div>
            </div>
             
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formGoods">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>

 

<script type="text/javascript">
    var lat = $("#lat").val();
    var lng = $("#lng").val();
    
    // debugger
    // 百度地图API功能
    var map = new BMap.Map("map");
    map.centerAndZoom(new BMap.Point(lng ,lat), 15);
    // 启用滚轮放大缩小
    map.enableScrollWheelZoom(true);
    // 向地图中添加缩放控件
    var ctrlNav = new window.BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE
    });
    map.addControl(ctrlNav);
    // 向地图中添加比例尺控件
    var ctrlSca = new window.BMap.ScaleControl({
        anchor: BMAP_ANCHOR_TOP_LEFT
    });

    var marker = new BMap.Marker(new BMap.Point(lng, lat));  // 创建标注，为要查询的地址对应的经纬度
    map.addOverlay(marker);

    map.addControl(ctrlSca);
    function showInfo(e) {  // 点击获取定位信息
    // debugger
        $("input[name='lng']").val(e.point.lng);
        $("input[name='lat']").val(e.point.lat);
        map.clearOverlays();// 清空上一次的标注信息
        var new_point = new BMap.Point(e.point.lng, e.point.lat);
        var marker = new BMap.Marker(new_point);  // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        map.panTo(new_point);
    }

    /* 准备按钮事件 */
    // function prepareBtn() {
    $("#mapmoveBtn").on("click", function () {
        var keyword = $("input[name='keyword']").val();
        if (keyword == '') {
            return layer.msg("地址不能为空");
        }
        localSearch.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);
            var province = poi.province;
            var city = poi.city;
            // debugger
            var province = poi.province;
            var province = poi.province;
            //获取经度和纬度，将结果显示在文本框中
            $("input[name='lng']").val(poi.point.lng);
            $("input[name='lat']").val(poi.point.lat);
            map.clearOverlays();//清空原来的标注
            map.centerAndZoom(poi.point, 15);
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地址对应的经纬度
            map.addOverlay(marker);
        });
        localSearch.search(keyword);
    });
    // }


    map.addEventListener("click", showInfo);
    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //允许自动调节窗体大小



    layui.use(['form', 'upload'], function () {
        var form = layui.form, upload = layui.upload;
        form.on('submit(formGoods)', function (data) {
            let tags = [];
            data.field.tags = JSON.stringify(tags);
            $.post('/store/shops.pick/edit', data.field, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, { icon: 1 })
                    $.pjax({ container: '#main', fragment: '#main', url: '/store/shops.pick/index' });
                    return false;
                }
                return layer.msg(res.msg, { icon: 2 });
            });

            return false;
        });


    });
</script>